<!DOCTYPE html>

<style>
  html {
    height: 100%;
  }
  body {
    padding: 0;
    margin: 0;
    height: 100%;
    
    margin-top: -20px;
    overflow: hidden;
    
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
  }
  #numbot {
    width: 420px;
    height: 575px;
    position: relative;
    margin: 0 auto;
  }
  #numbot div {
    width: 420px;
    height: 575px;
    position: absolute;
    left: 0;
    top: 0;
    
    background-repeat: no-repeat;
    
  }
  
  @-webkit-keyframes numbot-background {
    0% { left: 0; }
    100% { left: -840px; }
  }
  
  #numbot-head {
    background-image: url(images/lem-numbot-head.png);
  }
  #numbot-body {
    background-image: url(images/lem-numbot-body.png);
  }
  #numbot-l-leg {
    background-image: url(images/lem-numbot-l_leg.png);
  }
  #numbot-r-leg {
    background-image: url(images/lem-numbot-r_leg.png);
  }
  #numbot-r-arm {
    background-image: url(images/lem-numbot-r_upper_arm.png);
    
    -webkit-transform-origin: 300px 66px; 
    -webkit-animation: numbot-r-upper-arm-animation 10s infinite;
  }
  #numbot-r-lower-arm {
    background-image: url(images/lem-numbot-r_lower_arm.png);

    -webkit-transform-origin: 338px 222px; 
    -webkit-animation: numbot-r-lower-arm-animation 10s infinite;
    -webkit-animation-delay: 1s;
    -webkit-animation-fill-mode: backwards;
  }
  #numbot-r-hand {
    background-image: url(images/lem-numbot-r_hand.png);

    -webkit-transform-origin: 367px 376px; 
    -webkit-animation: numbot-r-hand-animation 10s infinite;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-fill-mode: backwards;
  }

  #numbot-l-arm {
    background-image: url(images/lem-numbot-l_upper_arm.png);
    
    -webkit-transform-origin: 118px 114px; 
    -webkit-animation: numbot-l-upper-arm-animation 10s infinite;
  }
  #numbot-l-lower-arm {
    background-image: url(images/lem-numbot-l_lower_arm.png);

    -webkit-transform-origin: 111px 113px; 
    -webkit-animation: numbot-l-lower-arm-animation 10s infinite;
    -webkit-animation-delay: 1s;
    -webkit-animation-fill-mode: backwards;
  }
  #numbot-l-hand {
    background-image: url(images/lem-numbot-l_hand.png);

    -webkit-transform-origin: 58px 387px; 
    -webkit-animation: numbot-l-hand-animation 10s infinite;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-fill-mode: backwards;
  }
  
  @-webkit-keyframes numbot-r-upper-arm-animation {
    0% { -webkit-transform: rotateZ(-.6deg); }
    50% { -webkit-transform: rotateZ(.6deg); }
    100% { -webkit-transform: rotateZ(-.6deg); }
  }
  @-webkit-keyframes numbot-r-lower-arm-animation {
    0% { -webkit-transform: rotateZ(-1.2deg); }
    50% { -webkit-transform: rotateZ(1.2deg); }
    100% { -webkit-transform: rotateZ(-1.2deg); }
  }
  @-webkit-keyframes numbot-r-hand-animation {
    0% { -webkit-transform: rotateZ(-3deg); }
    50% { -webkit-transform: rotateZ(3deg); }
    100% { -webkit-transform: rotateZ(-3deg); }
  }

  @-webkit-keyframes numbot-l-upper-arm-animation {
    0% { -webkit-transform: rotateZ(.8deg); }
    50% { -webkit-transform: rotateZ(-.8deg); }
    100% { -webkit-transform: rotateZ(.8deg); }
  }
  @-webkit-keyframes numbot-l-lower-arm-animation {
    0% { -webkit-transform: rotateZ(1.2deg); }
    50% { -webkit-transform: rotateZ(-1.2deg); }
    100% { -webkit-transform: rotateZ(1.2deg); }
  }
  @-webkit-keyframes numbot-l-hand-animation {
    0% { -webkit-transform: rotateZ(3deg); }
    50% { -webkit-transform: rotateZ(-3deg); }
    100% { -webkit-transform: rotateZ(3deg); }
  }
</style>

<div id='canvas'>
  <div id='numbot'>
    <div id='numbot-head'></div>
    <div id='numbot-l-arm'>
      <div id='numbot-l-lower-arm'>
        <div id='numbot-l-hand'></div>      
      </div>
    </div>
    <div id='numbot-body'></div>
    <div id='numbot-r-arm'>
      <div id='numbot-r-lower-arm'>
        <div id='numbot-r-hand'></div>      
      </div>
    </div>
    <div id='numbot-l-leg'></div>
    <div id='numbot-r-leg'></div>
  </div>
</div>
